<pro-header></pro-header>
<nz-card>
    <form nz-form [formGroup]="navigationForm">
        <div nz-form-item nz-row>
            <div nz-col nz-form-label [nzSpan]="6">
                <label>菜单类型</label>
            </div>
            <div nz-col [nzSpan]="12" id="type">
                <nz-select formControlName="type" (ngModelChange)=changeType($event) style="width: 40%;"
                           nzPlaceHolder="一级菜单">
                    <nz-option nzValue='0' nzLabel="一级菜单"></nz-option>
                    <nz-option nzValue='1' nzLabel="二级菜单"></nz-option>
                    <nz-option nzValue='2' nzLabel="三级菜单"></nz-option>
                </nz-select>
            </div>
        </div>
        <div nz-form-item nz-row>
            <div nz-col nz-form-label [nzSpan]="6">
                <label>一级菜单</label>
            </div>
            <div nz-col [nzSpan]="12" id="parentId">
                <nz-select formControlName="parentId" (ngModelChange)=changeStair($event) style="width: 40%;"
                           [nzDisabled]="stairDisable" nzPlaceHolder=''>
                    <nz-option *ngFor="let option of listOfStair" [nzLabel]="option.title"
                               [nzValue]="option.id">{{option.title}}}
                    </nz-option>
                </nz-select>
            </div>
        </div>
        <div nz-form-item nz-row>
            <div nz-col nz-form-label [nzSpan]="6">
                <label>二级菜单</label>
            </div>
            <div nz-col [nzSpan]="12" id="access">
                <nz-select formControlName="access" (ngModelChange)=changeAccess($event) style="width: 40%;"
                           [nzDisabled]="accessDisable" nzPlaceHolder=''>
                    <nz-option *ngFor="let option of listOfAccess" [nzLabel]="option.title"
                               [nzValue]="option.id">{{option.title}}
                    </nz-option>
                </nz-select>
            </div>
        </div>

        <div nz-form-item nz-row>
            <div nz-col nz-form-label [nzSpan]="6">
                <label>菜单名称</label>
            </div>
            <div nz-col nz-form-control [nzSpan]="12">
                <input formControlName="title" nz-input type="text">
            </div>
        </div>
        <div nz-form-item nz-row>
            <div nz-col nz-form-label [nzSpan]="6">
                <label>菜单链接</label>
            </div>
            <div nz-col nz-form-control [nzSpan]="12">
                <input formControlName="href" nz-input type="text">
            </div>
        </div>
        <div nz-form-item nz-row>
            <div nz-col nz-form-label [nzSpan]="6">
                <label>菜单排序</label>
            </div>
            <div nz-col nz-form-control [nzSpan]="12">
                <input formControlName="sort" nz-input type="text">
            </div>
        </div>
        <div nz-form-item nz-row style="display: none;">
            <input formControlName="icon" nz-input type="hidden">
            <div nz-col nz-form-label [nzSpan]="6">
                <label>菜单图标</label>
            </div>
            <div nz-col nz-form-control [nzSpan]="18">
                <div nz-row style="text-align: center;" *ngFor="let icons of acticonList">
                    <div nz-col class="gutter-row" nzSpan="3" *ngFor="let icon of icons">
                        <li (click)="selectIcon(icon)" [ngStyle]="setStyle()">
                            <i [class]="icon" style="font-size: 24px; vertical-align: middle;"></i>
                        </li>
                    </div>
                </div>
            </div>
        </div>
        <!--保存-->
        <div nz-form-item nz-row>
            <div nz-col nz-form-label [nzSpan]="6"></div>
            <div nz-col nz-form-control [nzSpan]="12">
                <button nz-button class="save-form-button" [nzType]="'primary'" [nzSize]="'large'" (click)="save()"
                        [disabled]="!navigationForm.valid">保存
                </button>
            </div>
        </div>
    </form>

</nz-card>
